<template>
	<div>
		<div class="menu">
			<el-button type="primary" size="small" @click="openAddMember">添加</el-button>
      <!-- 模糊查询 -->
      <div class="vagueFind">
        <el-form :inline="true" :model="vagueFindForm" class="demo-form-inline" size="small">
          <el-form-item label="账号状态">
            <!-- <el-select v-model="vagueFindForm.status" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
            </el-select> -->
            <template>
              <el-select v-model="vagueFindForm.status" placeholder="可选择状态" clearable>
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="权限">
            <template>
              <el-select v-model="vagueFindForm.role" placeholder="可选择权限" clearable>
                <el-option
                  v-for="item in visiters"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="vagueFindForm.userName" placeholder="请输入用户名" clearable>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMemberList(1)">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button type="info" icon="el-icon-delete" circle size="small" title="清除文本框数据" @click="clearvagueFindForm"></el-button>
		</div>
    <!-- 用户列表 -->
    <el-table :data="memberList" style="width: 100%" v-loading="loadStatus">
      <el-table-column prop="userId" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="userCode" label="账号" width="200">
      </el-table-column>
      <el-table-column prop="userName" label="用户名" width="200">
      </el-table-column>
      <el-table-column prop="status" label="账号状态" width="200">
        <template v-slot="scope">
          {{scope.row.status==0?'禁用':'启用'}}
        </template>
      </el-table-column>
      <el-table-column prop="role" label="权限"  width="200">
        <template v-slot="scope">
          <!-- {{scope.row.role==0?'超级管理员':'管理员'}} -->
          <p v-if="scope.row.role==0">普通用户</p>
          <p v-else-if="scope.row.role==1">管理员</p>
          <p v-else-if="scope.row.role==2">超级管理员</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button type="primary" size="mini" @click="openEditor(scope.row)">编辑</el-button>&nbsp;&nbsp;
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="delManager(scope.row.userId)">
            <el-button slot="reference" type="danger" size="mini">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
		<el-pagination background layout="prev, pager, next" :page-size="8" @current-change="getMemberList"
			:total="memberCount">
		</el-pagination>
		<AddManager :addVisible="addVisible"></AddManager>
		<EditorManager :editorVisible="editorVisible" :editorObj="editorObj"></EditorManager>
	</div>
</template>
<script>
	// import * as echarts from 'echarts';
	import AddManager from "./component/AddManager.vue"
	import EditorManager from "./component/EditorManager.vue"
  import qs from 'qs'
	export default {
		name: "member",
		components: {
			AddManager,
			EditorManager
		},
		data() {
			return {
				loadStatus: false,
				addVisible: false,
				editorVisible:false,
				memberCount: 0,
				memberList: [],
				editorObj:{},
        // 模糊查询用实体
        vagueFindForm: {
          status: null,
          role: null,
          userName:""
        },
        status:[{
          value:0,
          label: '禁用'
        },{
          value:1,
          label: '启用'
        }
        ],
        visiters: [{
        	value: 0,
        	label: '普通用户'
        }, {
        	value: 1,
        	label: '管理员'
        }, {
        	value: 2,
        	label: '超级管理员'
        }],
			}
		},
		mounted() {
			this.getMemberList(1)
			// var myChart = this.$echarts.init(document.getElementById('main'));
			// myChart.setOption(this.bar);
		},
		methods: {
      clearvagueFindForm(){
        this.vagueFindForm={
          status: null,
          role: null,
          userName:""
        }
        this.getMemberList(1)
      },
			openAddMember() {
				this.addVisible = true
			},
			openEditor(obj){
				// console.log(obj)
        var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(onlineManager.role===2){
          if(obj.userId){
          	this.editorObj=obj
          	this.editorVisible=true
          }else{
          	this.$message({
          		message: "获取数据错误",
          		type: "error",
          		duration: 1000,
          	})
          }
        }else{
          this.$message({
          	message: "权限不足!",
          	type: "error",
          	duration: 1000,
          })
        }
			},
      // 分页查询数据
			getMemberList(page) {
        // console.log(this.vagueFindForm)
				var self = this;
				self.loadStatus = true
				sessionStorage.setItem("page",page)
				var manager = JSON.parse(sessionStorage.getItem("manager"))
        // this.vagueFindForm.userName="123"
        // this.vagueFindForm.status=1
        // console.log(this.vagueFindForm.userName)
        //进行空值还原，防止数据类型错误
        if(this.vagueFindForm.role===""){
          this.vagueFindForm.role=null
        }
        if(this.vagueFindForm.status===""){
          this.vagueFindForm.status=null
        }
        //非法字符判断
				if(this.vagueFindForm.userName.split(" ").length==1){
          self.$http.get("/api/CakeShop/findAllUser", {
          	// headers: {
          	// 	token: manager.token
          	// },
          	params: {
              start: page,
              pageSize: 8,
              userName:this.vagueFindForm.userName,
              status:this.vagueFindForm.status,
              role:this.vagueFindForm.role,
          	}
          }).then(function(res) {
          	// console.log(res)
          	if (res.data.userlist != null || res.data.userlist != {}) {
          		self.memberCount = res.data.pagecount
          		self.memberList = res.data.userlist
          		self.loadStatus = false
          	}
          }).catch(function(error) {
          	// console.log(error)
          	self.loadStatus = false
          })
        }else{
          self.$message({
          	duration: 1500,
          	message: "查询文本框中存在非法字符空格!",
          	type: "error",
          	onClose: function() {
              self.vagueFindForm.userName = ""
          		self.loadStatus = false
          	},
          });
        }
			},

      //根据id删除数据
			delManager(userId) {
				var onlineManager = JSON.parse(sessionStorage.getItem("manager"))
        if(onlineManager.role===2){
          if(onlineManager.userId===userId){
            this.$message({
            	message: "删除无效!",
            	type: "error",
            	duration: 1000
            })
          }else{
            this.$http.delete("/api/CakeShop/delUser", {
            	headers: {
            		token: onlineManager.token
            	},
            	params: {
            		userId
            	}
            }).then((res) => {
              // console.log(res)
            	if (res.data.delSuccNum>0) {
            		this.$message({
            			message: res.data.msg,
            			type: "success",
            			duration: 1000,
            			onClose: () => {
            				this.getMemberList(sessionStorage.getItem("page"))
            			}
            		})
            	} else {
            		this.$message({
            			message: res.data.msg,
            			type: "error",
            			duration: 1000
            		})
            	}
            }, function(err) {})
          }
        }else{
          this.$message({
          	message: "权限不足!",
          	type: "error",
          	duration: 1000
          })
        }
			}
		}
	}
</script>

<style scoped>
	.menu {
    display: flex;
		width: 100%;
		padding: 10px 5px;
		background: #FFFFFF;
		box-sizing: border-box;
		margin-bottom: 5px;
	}
  .menu .vagueFind{
    display: flex;
    background: #FFFFFF;
    margin-left: 20px;
  }
  .menu .vagueFind .el-form .el-form-item{
    margin-bottom: 0;
  }
  .menu .vagueFind .el-select{
    width: 120px;
  }
  /* .menu .vagueFind{
    height: 10px;
  } */
</style>
